<template>
  <div class="bottomSelect">
    <!-- 元素组  -->
    <div class="elements">
      <div v-for="(item, index) in data" :key="index" class="element" @click="clickHandle(item, index)">
        <div class="container">

          <div class="shade">
            <i
              :class="['iconfont', (currentIndex == index && item.activeIconfont) ? item.activeIconfont : item.iconfont, 'icon']" />
            <div class="unread_count" v-if="item.unreadCount">{{ (item.unreadCount >= 99) ? '99+' : item.unreadCount }}
            </div>
          </div>
          <div class="text">
            {{ item.title }}
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElNotification } from 'element-plus';
import { h, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

//当前的选择
const currentIndex = ref();

export interface BottomSelectItemType {
  title: string,
  iconfont: string,
  activeIconfont?: string,
  goto: string,
  unreadCount: number,
}

const props = defineProps({
  data: {
    type: Array<BottomSelectItemType>
  }
})

const clickHandle = (item: BottomSelectItemType, index: number) => {
  currentIndex.value = index;
  if (item.goto) {
    router.push({
      name: item.goto
    });
  } else {
    ElNotification({
      title: '提示',
      message: h('i', { style: 'color: black' }, '未定义跳转'),
    })
  }
}

</script>

<style lang="scss" scoped>
@use '@/assets/scss/base.scss';

.bottomSelect {
  @extend .base_background_color;
  min-height: 7%;
  background-image: linear-gradient(to left, aliceblue, rgba(255, 192, 214, 0.249), rgb(205, 230, 252), rgba(255, 192, 214, 0.304));
}

.elements {
  display: flex;
  align-items: center;
  height: 100%;

  .element {
    flex: 1;
    height: 100%;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;

    //贴心设计
    &:hover {
      .container {
        background-color: rgba(0, 0, 0, 0.100);
        transition: all 0.2s ease;
      }
    }

    .container {
      border-radius: 50%;
      height: 50px;
      width: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      transition: all 0.5s ease;


    }

    .shade {
      position: relative;

      .icon {
        font-size: 20px;
      }

      .unread_count {
        position: absolute;
        padding: 1px;
        top: 0px;
        right: 0px;
        height: 10px;
        width: auto;
        min-width: 10px;
        border-radius: 45%;
        background-color: red;
        font-size: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .text {
      font-size: 10px;
    }


  }
}
</style>
